﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>
<style>
    .el-header {
        height: 80px !important;
    }

    .head_content {
        background: #102238;
        display: flex;
        align-items: center;
        height: 80px;
    }

    .head_info {
        width: 550px;
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center
    }

    .systemname {
        color: white;
        font-size: 24px;
    }

    .head_menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%
    }

    .head_menuitem {
        background-color: #304156;
        height: 30px;
        width: 80px;
        cursor: pointer;
        color: rgb(191, 203, 217);
        ;
        font-size: 16px;
        margin-top: 3px;
        margin-bottom: 3px;
        margin-left: 5px;
        margin-right: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px
    }

    .head_menuitem:hover {
        background-color: rgba(84, 168, 254, 0.5);
    }

    .head_other {
        width: 300px;
    }

    .head_other_container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .username {
        color: white;
        margin-left: 10px
    }

    .userheadimg {
        width: 40px;
        height: 40px;
        border-radius: 20px;
    }

    .el-popover {
        padding: 0 !important;
        border: none !important;
        color: white !important;
    }

    .personinfo {
        width: 300px;
        height: 200px;
        background: rgb(48, 65, 86);
    }

    .person_base {
        width: 300px;
        height: 80px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .person_modify {
        width: 300px;
        height: 60px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .person_modify_label {
        width: 100px;
        cursor: pointer;
        font-size: 15px;
    }

    .person_modify_icon {
        padding-right: 5px;
        font-size: 15px;
    }


    .person_userheadimg {
        width: 60px;
        height: 60px;
        padding-left: 10px;
        padding-right: 20px;
    }

    .person_username {
        color: white;
        font-size: 18px;
    }

    .leftmenu {
        height: 100%;
        background-color: rgb(48, 65, 86);
        overflow-x: hidden
    }

    .menucointer {
        width: 160px;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: left;
    }

    .menu {
        width: 160px;
        text-align: left;
    }

    .menumain {
        width: 160px;
        text-align: left;
        height: 56px;
        cursor: pointer;
        line-height: 56px;
        color: rgb(191, 203, 217);
        background-color: rgb(48, 65, 86);
    }

    .menumain:hover {
        width: 160px;
        text-align: left;
        height: 56px;
        cursor: pointer;
        line-height: 56px;
        color: rgb(191, 203, 217);
        background-color: #263445 !important;
    }

    .submenuitemcointer {
        padding: 0;
        margin: 0;
        width: 160px;
        text-align: left;
        list-style: none;
    }

    .submenu {
        width: 160px;
        text-align: left;
        height: 56px;
        cursor: pointer;
        line-height: 56px;
        background-color: #1f2d3d;
    }

    .submenu:hover {
        width: 160px;
        text-align: left;
        height: 56px;
        cursor: pointer;
        line-height: 56px;
        background-color: #001528 !important;
    }

    .menutext {
        margin-left: 15px;
        color: rgb(191, 203, 217);
        font-size: 14px;
    }

    .subenutext {
        margin-left: 25px;
        color: rgb(191, 203, 217);
        font-size: 14px;
    }

    .menumainarrow {
        margin-left: 50px;
        font-size: 10px
    }

    .tabhead {
        background-color: white;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tabtitlecontainer {
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d8dce5;
    }

    .tabmain {
        height: 40px;
        width: auto;
        line-height: 36px;
        overflow: scroll;
        float: left;
        overflow-y: hidden;
        overflow-x: auto;
        white-space: nowrap;
    }

    .tabop {
        height: 40px;
        width: 100px;
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    .tabtitle {
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: inline-block;
        position: relative;
        cursor: pointer;
        border: 1px solid #d8dce5;
        color: #495060;
        background: #fff;
        padding: 0 8px;
        font-size: 12px;
        margin-left: 5px;
    }

    .tabtitle:hover {
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: inline-block;
        position: relative;
        cursor: pointer;
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        padding: 0 8px;
        font-size: 12px;
        margin-left: 5px;
    }

    .active {
        width: 100px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: inline-block;
        position: relative;
        cursor: pointer;
        background-color: #42b983;
        color: #fff;
        border-color: #42b983;
        padding: 0 8px;
        font-size: 12px;
        margin-left: 5px;
    }

    .active::before {
        content: "";
        background: #fff;
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: relative;
        margin-right: 2px;
    }
</style>

<body>
    <div id="app" v-cloak>
        <el-container>
            <el-header style="margin: 0;padding: 0">
                <div class="head_content">
                    <div class="head_info">
                        <img style="width:70px;height: 70px;" src="../../Resource/images/logo.png">
                        <span class="systemname">@ViewData["SystemName"]</span>
                    </div>
                    <div class="head_menu">
                        <div class="head_menuitem" v-for="menu in topMenuList" v-on:click="bindLeftMenu(menu.id)">
                            <span>{{menu.label}}</span>
                        </div>
                    </div>
                    <div class="head_other">
                        <div class="head_other_container">
                            <el-popover placement="bottom" trigger="hover">
                                <div class="personinfo">
                                    <div class="person_base">
                                        <img class="person_userheadimg" :src="userImageUrl">
                                        <span class="person_username">{{userName}}</span>
                                    </div>
                                    <div class="person_modify">
                                        <i class="el-icon-user person_modify_icon"></i>
                                        <span class="person_modify_label" v-on:click="modifyUserInfo">个人信息</span>
                                        <i class="el-icon-s-tools person_modify_icon"></i>
                                        <span class="person_modify_label" v-on:click="modifyPWD">修改密码</span>
                                    </div>
                                    <div class="person_modify">
                                        <el-button type="primary" style="width:280px" v-on:click="loginOut">退出系统
                                        </el-button>
                                    </div>
                                </div>
                                <img class="userheadimg" slot="reference" :src="userImageUrl">
                            </el-popover>
                            <span class="username">你好！ {{userName}}</span>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-main>
                <el-container>
                    <el-aside style="width:160px" v-show="showleft">
                        <div class="leftmenu" :style="{height:leftmenuheight+'px'}">
                            <ul class="menucointer" v-for="menu in leftMenuList">
                                <li class="menumain" v-on:click="menuClick(menu)">
                                    <span class="menutext">{{menu.label}}</span>
                                    <i v-if="menu.hasChildren" :menuiconid="menu.id"
                                        class="menumainarrow el-icon-arrow-down"></i>
                                </li>
                                <li v-if="menu.hasChildren" class="menu" :id="menu.id" style="display: none">
                                    <ul class="submenuitemcointer" v-if="menu.hasChildren">
                                        <li class="submenu" v-for="submenu in menu.children"
                                            v-on:click="addTab(submenu)">
                                            <span class="subenutext">{{submenu.label}}</span>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </el-aside>
                    <el-main>
                        <el-container>
                            <el-header class="tabhead">
                                <div class="tabtitlecontainer">
                                    <div class="tabop">
                                        <div v-on:click="changeTab(mainMenu)"
                                            :class="mainMenu.id==activeTabID?'tabtitle active':'tabtitle'"
                                            :title="mainMenu.label">
                                            <span v-text="mainMenu.label"></span>
                                            <span v-on:click="refreshTab(mainMenu)"
                                                class="el-icon-refresh-right"></span>
                                            <span v-if="mainMenu.candelete" v-on:click="closeTab(mainMenu)"
                                                class="el-icon-close"></span>
                                        </div>
                                    </div>
                                    <div class="tabmain" id="tabmain">
                                        <div v-for="tab in tabList" v-on:click="changeTab(tab)"
                                            :class="tab.id==activeTabID?'tabtitle active':'tabtitle'" :title="tab.label">
                                            <span v-if="tab.label.length<=4">{{tab.label}}</span>
                                            <span v-else>{{tab.label.substr(0,4)}}....</span>
                                            <span v-on:click="refreshTab(tab)" class="el-icon-refresh-right"></span>
                                            <span v-if="tab.candelete" v-on:click="closeTab(tab)"
                                                class="el-icon-close"></span>
                                        </div>
                                    </div>
                                    <div class="tabop">
                                        <span v-on:click="closeAllTab" style="cursor: pointer;" class="el-icon-close"
                                            title="关闭所有"></span>
                                    </div>
                                </div>
                            </el-header>
                            <el-main>
                                <div class="tabcontentcontainer">
                                    <iframe v-show="mainMenu.id==activeTabID" :src="mainMenu.arttibutes.moduleurl"
                                        :id="mainMenu.id" style="width:100%;border-width:0;vertical-align: bottom "
                                        :style="{height:frameHeight+'px'}"></iframe>
                                    <iframe v-for="tab in tabList" v-show="tab.id==activeTabID"
                                        :src="tab.arttibutes.moduleurl" :id="tab.id"
                                        style="width:100%;border-width:0;vertical-align: bottom "
                                        :style="{height:frameHeight+'px'}"></iframe>
                                </div>
                            </el-main>
                        </el-container>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")

</html>

<script>
    var menuUrl = GetRootPath() + "Frame/Module/GetMainPageMenu";
    var userHomeInfoUrl = GetRootPath() + "Frame/User/GetHomeInfo";
    var settingUrl = GetRootPath() + "Frame/Home/GetSettingInfo";
    var defaultUserImgUrl = GetRootPath() + 'Resource/images/person.png'
    var loginOutUrl = GetRootPath() + "Frame/Auth/LoginOut";
    var pageData = {
        leftmenuheight: 0,
        showleft: false,
        topMenuList: [],
        leftMenuList: [],
        tabList: [],
        existTabGuidList: [],
        activeTabID: '',
        frameHeight: 0,

        userImageUrl: defaultUserImgUrl,
        userName: '',
        userGuid: '',
        mainMenu: {
            arttibutes: {}
        },
    };
    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            pageData.leftmenuheight = document.body.clientHeight - 80
            pageData.frameHeight = document.body.clientHeight - 80 - 41
            bindTopMenu();
            bindUserInfo();
            this.bindSetting();
        },
        methods: {
            menuClick: function (menu) {
                var menuid = menu.id;
                if (menu.hasChildren) {
                    $("#" + menuid).slideToggle();
                    $("i[menuiconid='" + menuid + "']").toggleClass("el-icon-arrow-down");
                    $("i[menuiconid='" + menuid + "']").toggleClass("el-icon-arrow-up");
                } else {
                    this.addTab(menu)
                }

            },
            bindLeftMenu: function (ParentModuleGuid) {
                pageData.showleft = true;
                var data = {
                    Modle: "Left",
                    ParentModuleGuid: ParentModuleGuid
                }
                JsonAjaxPost(menuUrl, JSON.stringify(data), function (data, status) {
                    Vue.set(pageData, "leftMenuList", data.tree);
                })
            },
            addTab(menu) {
                if (menu.arttibutes.moduleurl) {
                    if (menu.arttibutes.moduleurl.indexOf(GetRootPath()) < 0) {
                        menu.arttibutes.moduleurl = GetRootPath() + menu.arttibutes.moduleurl;
                    }
                    if (pageData.existTabGuidList.indexOf(menu.id) < 0) {
                        pageData.existTabGuidList.push(menu.id);
                        pageData.activeTabID = menu.id;
                        menu.candelete = true;
                        pageData.tabList.push(menu);
                    } else {
                        pageData.activeTabID = menu.id;
                    }
                } else {
                    OpenAlert('提示', '该菜单未配置模块地址！')
                }
                this.bindTabMouseScrollEvent();
                this.scrollRightTab();
            },
            changeTab(menu) {
                pageData.activeTabID = menu.id;
                //这里判断是因为tab的点击事件在删除事件之前触发
                if (pageData.existTabGuidList.indexOf(pageData.activeTabID) < 0) {
                    pageData.activeTabID = pageData.existTabGuidList[pageData.existTabGuidList.length - 1];
                }
            },
            refreshTab(menu) {
                if (pageData.activeTabID == menu.id) {
                    document.getElementById(menu.id).src = menu.arttibutes.moduleurl;
                }
            },
            closeTab(menu) {
                for (var i = 0; i < pageData.existTabGuidList.length; i++) {
                    if (pageData.existTabGuidList[i] == menu.id) {
                        pageData.existTabGuidList.splice(i, 1);
                        break;
                    }
                }
                for (var i = 0; i < pageData.tabList.length; i++) {
                    if (pageData.tabList[i].id == menu.id) {
                        pageData.tabList.splice(i, 1);
                        break;
                    }
                }
                if (pageData.existTabGuidList.length > 0) {
                    //如果删除一个tab，并且这个tab不存在了，则默认active的tab为最后一个
                    if (pageData.existTabGuidList.indexOf(pageData.activeTabID) < 0) {
                        pageData.activeTabID = pageData.existTabGuidList[pageData.existTabGuidList.length - 1];
                    }
                }
            },
            modifyUserInfo: function () {
                OpenTopDialog('useredit', '修改个人信息', 'Frame/User/Modify?RowGuid=' + pageData.userGuid, 600,
                    800,
                    bindUserInfo)
            },
            modifyPWD: function () {
                OpenTopDialog('modifypwd', '修改密码', 'Frame/User/ModifyPWD', 600,
                    800,
                    bindUserInfo)
            },
            loginOut: function () {
                var data = {}
                JsonAjaxPost(loginOutUrl, JSON.stringify(data), function (data, status) {
                    if (data.code == 0) {
                        var returnurl = data.returnurl;
                        window.location.href = returnurl;
                    }
                })
            },
            bindSetting: function () {
                var data = {}
                JsonAjaxPost(settingUrl, JSON.stringify(data), function (data, status) {
                    if (data.code == 0) {
                        var defaultmainindex = data.defaultmainindex;
                        if (defaultmainindex != "") {
                            pageData.mainMenu.arttibutes.moduleurl = GetRootPath() +
                                defaultmainindex;
                            pageData.mainMenu.id = "mainindex";
                            pageData.mainMenu.candelete = false;
                            pageData.mainMenu.label = "主页"
                            pageData.activeTabID = pageData.mainMenu.id;
                            pageData.existTabGuidList = ["mainindex"]
                        }
                    }
                })
            },
            closeAllTab: function () {
                pageData.tabList = [];
                pageData.existTabGuidList = ["mainindex"]
                this.bindSetting();
                this.bindTabMouseScrollEvent();
            },
            bindTabMouseScrollEvent() {
                this.$nextTick(function () {
                    $(".tabmain").each(function (index, element) {
                        element.onwheel = function (event) {
                            var table = $("#tabmain");
                            var right = table[0].scrollWidth-$(element).width();
                            //table[0].scrollWidth为div包含滚动部分的全部宽度，$(element).width()为div的宽度，计算可得知滚动部分长度
                            //table.scrollLeft()为div已经滚动了多少，相比较就可以判断div是否滚动完毕
                            if (table.scrollLeft() < right && event.deltaY > 0) {
                                //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
                                event.preventDefault();
                                var left = (table.scrollLeft() + 100);
                                table.scrollLeft(left)
                            }
                            if (table.scrollLeft() > 0 && event.deltaY < 0) {
                                //禁止事件默认行为（此处禁止鼠标滚轮行为关联到"屏幕滚动条上下移动"行为）
                                event.preventDefault();
                                var left = (table.scrollLeft() - 100);
                                table.scrollLeft(left)
                            }
                        }
                    })
                })
            },
            scrollRightTab() {
                this.$nextTick(function () {
                    var tabobj = $("#tabmain");
                    tabobj.scrollLeft(1000)
                })
            }
        }
    })

    function bindTopMenu() {
        var data = {
            Modle: "Top"
        }
        JsonAjaxPost(menuUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "topMenuList", data.tree);
        })
    }

    function bindUserInfo() {
        var data = {

        }
        JsonAjaxPost(userHomeInfoUrl, JSON.stringify(data), function (data, status) {
            if (data.code == 0) {
                Vue.set(pageData, "userName", data.DisplayName);
                Vue.set(pageData, "userGuid", data.UserGuid);
                if (data.ExistHeadImg) {
                    Vue.set(pageData, "userImageUrl", GetRootPath() + "Frame/Attach/ReadFile?RowGuid=" + data
                        .AttachGuid);
                }
            }

        })

    }
</script>